<template>
  <div class="forget_bac">
    <div class="progress">
      <el-steps
        :active="0"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step title="登录账户输入" />
        <el-step title="重置密码" />
        <el-step title="重置完毕" />
      </el-steps>
    </div>
    <div class="forget_input_form">
      <el-form
        ref="loginForm"
        :model="loginForm"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <el-form-item label="手机号：" label-width="80px" prop="phone">
          <el-input
            ref="phone"
            v-model="loginForm.phone"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="loginForm.code_img"
            placeholder="请输验证码"
            class="code_img_input left"
          />
          <img :src="imgCodeSrc" class="code_img right" @click="getImgCode">
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="loginForm.phone_code"
            placeholder="请输短信验证码"
            class="code_img_input left"
          />
          <el-button
            type="primary"
            class="right"
            :disabled="!isCanGainCode"
            @click="getPhoneCode"
          >
            <i v-show="isCanGainCode">发送验证码</i>
            <i v-show="!isCanGainCode">{{ timeNum }}s后重新获取</i>
          </el-button>
        </el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="handleLogin"
        >下一步</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate';
import {
  getImgCode,
  getPhoneCode,
  phoneCodeValid
} from '@/api/user';

export default {
  components: {},
  data() {
    return {
      loading: false,
      picCodeUuid: '',
      imgCodeSrc: '',
      isCanGainCode: true,
      timeNum: 10,
      loginForm: {
        phone: localStorage.getItem('phone') || '15602912580',
        code_img: '',
        phone_code: ''
      },
      sit: '' // 倒计时
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.picCodeUuid = new Date().getTime() + parseInt(Math.random() * 101);
    this.getImgCode();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getImgCode() {
      getImgCode({ picCodeUuid: this.picCodeUuid }).then((res) => {
        // this.loginForm.code_img = res.data.value
        this.imgCodeSrc = res.data.base64Str;
      });
    },

    getPhoneCode() {
      if (!validPhone(this.loginForm.phone)) {
        this.$message({
          message: '请输入正确的手机号码',
          type: 'warning'
        });
        return;
      } else if (!this.loginForm.code_img) {
        this.$message({
          message: '请输入图片验证码',
          type: 'warning'
        });
        return;
      }

      getPhoneCode({
        phone: this.loginForm.phone,
        picCode: this.loginForm.code_img,
        picCodeUuid: this.picCodeUuid
      }).then((res) => {
        this.$message({
          message: '短信验证码发送成功',
          type: 'success'
        });
        this.isCanGainCode = false;
        this.sit = setInterval(() => {
          if (this.timeNum > 0) {
            this.timeNum -= 1;
          } else {
            clearInterval(this.sit);
            this.timeNum = 10;
            this.isCanGainCode = true;
          }
        }, 1000);
      }).catch(err => {
        if (err) {
          this.getImgCode();
          this.loginForm.code_img = '';
        }
      });
    },

    /**
     * 下一步
     */
    handleLogin() {
      phoneCodeValid({
        phone: this.loginForm.phone,
        phoneCode: this.loginForm.phone_code
      }).then((res) => {
        console.log(res);
        const token = res.data.passwordResetTempToken;
        this.$router.push({
          path: '/updatePassword/resetPassword',
          query: {
            passwordResetTempToken: token,
            phone: this.loginForm.phone
          }
        });
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.forget_input_form {
  width: 450px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
}

.code_img {
  width: 120px;
  height: 38px;
}

.code_img_input {
  width: 240px;
}
</style>
